<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Countdown Example 2</title>
    <script src="source/moo.js"></script>
    <script src="source/switchable.js"></script>
	<link rel="stylesheet" href="reset.css" type="text/css" /> 
<style>
.main{
	height: 400px;
	width: 740px;
	position: relative;
	margin-bottom: 15px;
	background-color: white;
	border: 2px solid #F8DAD5;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 1px #F1F1F1;
	-moz-box-shadow: 0 0 1px #F1F1F1;
	-webkit-box-shadow: 0 0 1px #F1F1F1;
	padding: 12px 0;
}
.countdown{
	padding: 0 8px 2px;
	z-index: 20;
}
.countdown h2 {
	padding: 3px 8px;
	font: bold 23px/36px "微软雅黑";
	color: #333;
}
.countdown h2 span {
	color: #DC442F;
}
.countdown h2 a{
    color:#333333
}
.countdown h2 a:visited{
    color:#333333
}
.countdown h2 a:hover{
    color:#333333
}
.countdown .info-box {
	margin-top: 12px;
	position: relative;
	zoom: 1;
}
.countdown .meta {
	position:relative;
    border:1px solid #ffed85;
    border-right:none;
    border-top:none;
    height:183px;
    width:254px;
    float:left;
    margin-left:2px;
    padding-top:128px;
    z-index:20;
}
.countdown .item-buy{
	width:281px;
    height:68px;
    position:absolute;
    z-index:20;
    left:-27px;
    top:0;
    background:url(assets/group.png) no-repeat;
}
.countdown .moo-countdown-run .item-buy{
	background-position: right -78px;
}
.countdown .moo-countdown-end .item-buy{
	background-position: right 0; 
}
.countdown .item-buy strong{
	font: bold 46px Arial;
	color: white;
	text-shadow: 1px 1px 1px #666;
	letter-spacing: -3px;
	display: block;
	height: 68px;
	line-height: 68px;
	padding-right: 90px;
	text-align: center;	
}
.countdown .item-buy .btn{
	width: 281px;
	height: 68px;
	display: block;
	position: absolute;
	top: 0;
	cursor: pointer;
	background: url(assets/group.png) no-repeat;
}
.countdown .item-buy .buy {
	background-position: 190px 0;
}
.countdown .item-buy .start {
	background-position: 190px -78px;
}
.countdown .item-prices {
	width: 253px;
	height: 59px;
	position: absolute;
	z-index: 10;
	top: 68px;
	left: -11px;
	padding-left: 12px;
	background: url(assets/price.png) no-repeat 1px 0;
	word-break: normal;
	word-wrap: normal;
}
.countdown .item-prices dt, .countdown .item-prices dd {
	width: 84px;
	height: 29px;
	line-height: 29px;
	float: left;
	text-align: center;
}
.countdown .item-prices dt {
	font-size: 14px;
	color: #666;
}
.countdown .item-prices dd {
	font: 17px Verdana;
	letter-spacing: -2px;
	color: #333;
}

.countdown .time-count {
	margin: 14px 0 0 10px;
	white-space: nowrap;
}
.countdown .time-count .tit {
	vertical-align: middle;
	display: inline;
}

.countdown .time-count .value{
    display:inline;
    font:normal 20px Verdana;
    color:#333;
    line-height:1em;
    vertical-align: middle;
}
.countdown .time-count .unit{
    vertical-align: middle;
    margin:0 2px 0 1px;
}

.countdown .picbox {
	width: 460px;
	height: 310px;
	position: relative;
	z-index: 10;
	float: left;
	border: 1px solid #A51100;
	border-left: none;
	background:#cf301a;
}
.countdown .moo-countdown-run .picbox{
	border-color:#1e4502;
    background:#2e7409;
}
.countdown .pic {
	width: 452px;
	height: 301px;
	padding: 3px 4px 4px;
	border-top: 1px solid #FD9B8B;
}
.countdown .moo-countdown-run .pic {
	border-color: #69B539;
}
.countdown .pic a {
	border: 1px solid #F5D6D1;
	display: block;
	text-align: center;
	background-color: white;
	height: 300px;
	overflow: hidden;
}
</style>


</head>
<body>
<div>
        <p>
            <h1>Countdown Example 2:</h1>
        </p>
</div>
<div class="main">
	<div class="countdown">
		<h2><span>今日推荐:</span>【10:02开团】现价59.5元包邮 原价119元个性时尚静音金属挂钟12寸（每个ID限购3件）</h2>
		<div class="info-box">
			<div class="Auto_Widget" data-widget-type="Countdown"  data-widget-config="{
				 'endTime': '10000',
				 'interval': 1000, 
				 'timeRunCls': '.moo-countdown-run', 
				 'timeUnitCls':{     
					'h': '.moo-h',       
					'm': '.moo-m',       
					's': '.moo-s',              
				 },
				 'minDigit': 2,
				 'timeEndCls': '.moo-countdown-end'
			}">
				<div class="meta">
					<!-- 购买按钮 -->		
					<!-- 倒计时进行中显示的内容，即将开始 -->
					<div class= "moo-countdown-run">
						<div class="item-buy">
							<strong class="price"><b>￥</b>119<span>.00</span></strong>
							<a class="start btn" href="#" target="_blank">
							</a>
						</div>
					</div>
					<!-- 倒计时结束时显示的内容，参团 -->
					<div class= "moo-countdown-end">
						<div class="item-buy">
							<strong class="price"><b>￥</b>59<span>.50</span></strong>
							<a class="buy btn" href="#" target="_blank">
							</a>
						</div>
					</div>
					<!-- 价格折扣 -->
					<dl class="item-prices">
						<dt class="price">原 价</dt>
						<dt class="discount">折 扣</dt>
						<dt class="save">节 省</dt>
						<dd class="price"><del>￥119.00</del></dd>
						<dd class="discount">5.4</dd>
						<dd class="save">￥59.50</dd>
					</dl>
					<!-- 倒计时 -->
					<div class="time-count moo-countdown-run">
						<p class="tit">剩余时间: </p>
						<span class="moo-h value"></span><span class="unit">小时</span>
						<span class="moo-m value"></span><span class="unit">分</span>
						<span class="moo-s value"></span><span class="unit">秒</span>
					</div><!--/time-count-->
				</div>	
				<!-- 倒计时进行中显示的内容，绿色边框 -->
				<div class= "moo-countdown-run">
					<div class="picbox">
						<div class="pic">
							<a target="_blank" href="#"><img src="assets/cutdown_pro.jpg"></a>
						</div>
					</div>
				</div>
				<!-- 倒计时结束时显示的内容，红色边框 -->
				<div class= "moo-countdown-end">
					<div class="picbox">
						<div class="pic">
							<a target="_blank" href="#"><img src="assets/cutdown_pro.jpg"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>




<div class="code" style="margin-top:20px;">
    <h2>Dom code:</h2>
    <pre>
&lt;div class="main"&gt;
	&lt;div class="countdown"&gt;
		&lt;h2&gt;&lt;span&gt;今日推荐:&lt;/span&gt;【10:02开团】现价59.5元包邮 原价119元个性时尚静音金属挂钟12寸（每个ID限购3件）&lt;/h2&gt;
		&lt;div class="info-box"&gt;
			&lt;div class="Auto_Widget" data-widget-type="Countdown"  data-widget-config="{
				 'endTime': '10000',
				 'interval': 1000, 
				 'timeRunCls': '.moo-countdown-run', 
				 'timeUnitCls':{     
					'h': '.moo-h',       
					'm': '.moo-m',       
					's': '.moo-s',              
				 },
				 'minDigit': 2,
				 'timeEndCls': '.moo-countdown-end'
			}"&gt;
				&lt;div class="meta"&gt;
					&lt;!-- 购买按钮 --&gt;		
					&lt;!-- 倒计时进行中显示的内容，即将开始 --&gt;
					&lt;div class= "moo-countdown-run"&gt;
						&lt;div class="item-buy"&gt;
							&lt;strong class="price"&gt;&lt;b&gt;￥&lt;/b&gt;119&lt;span&gt;.00&lt;/span&gt;&lt;/strong&gt;
							&lt;a class="start btn" href="#" target="_blank"&gt;
							&lt;/a&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;!-- 倒计时结束时显示的内容，参团 --&gt;
					&lt;div class= "moo-countdown-end"&gt;
						&lt;div class="item-buy"&gt;
							&lt;strong class="price"&gt;&lt;b&gt;￥&lt;/b&gt;59&lt;span&gt;.50&lt;/span&gt;&lt;/strong&gt;
							&lt;a class="buy btn" href="#" target="_blank"&gt;
							&lt;/a&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;!-- 价格折扣 --&gt;
					&lt;dl class="item-prices"&gt;
						&lt;dt class="price"&gt;原 价&lt;/dt&gt;
						&lt;dt class="discount"&gt;折 扣&lt;/dt&gt;
						&lt;dt class="save"&gt;节 省&lt;/dt&gt;
						&lt;dd class="price"&gt;&lt;del&gt;￥119.00&lt;/del&gt;&lt;/dd&gt;
						&lt;dd class="discount"&gt;5.4&lt;/dd&gt;
						&lt;dd class="save"&gt;￥59.50&lt;/dd&gt;
					&lt;/dl&gt;
					&lt;!-- 倒计时 --&gt;
					&lt;div class="time-count moo-countdown-run"&gt;
						&lt;p class="tit"&gt;剩余时间: &lt;/p&gt;
						&lt;span class="moo-h value"&gt;&lt;/span&gt;&lt;span class="unit"&gt;小时&lt;/span&gt;
						&lt;span class="moo-m value"&gt;&lt;/span&gt;&lt;span class="unit"&gt;分&lt;/span&gt;
						&lt;span class="moo-s value"&gt;&lt;/span&gt;&lt;span class="unit"&gt;秒&lt;/span&gt;
					&lt;/div&gt;&lt;!--/time-count--&gt;
				&lt;/div&gt;	
				&lt;!-- 倒计时进行中显示的内容，绿色边框 --&gt;
				&lt;div class= "moo-countdown-run"&gt;
					&lt;div class="picbox"&gt;
						&lt;div class="pic"&gt;
							&lt;a target="_blank" href="#"&gt;&lt;img src="assets/cutdown_pro.jpg"&gt;&lt;/a&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;!-- 倒计时结束时显示的内容，红色边框 --&gt;
				&lt;div class= "moo-countdown-end"&gt;
					&lt;div class="picbox"&gt;
						&lt;div class="pic"&gt;
							&lt;a target="_blank" href="#"&gt;&lt;img src="assets/cutdown_pro.jpg"&gt;&lt;/a&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>


<div class="code" style="margin-top:20px;">
    <h2>Css code:</h2>
    <pre>
.main{
	height: 400px;
	width: 740px;
	position: relative;
	margin-bottom: 15px;
	background-color: white;
	border: 2px solid #F8DAD5;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 1px #F1F1F1;
	-moz-box-shadow: 0 0 1px #F1F1F1;
	-webkit-box-shadow: 0 0 1px #F1F1F1;
	padding: 12px 0;
}
.countdown{
	padding: 0 8px 2px;
	z-index: 20;
}
.countdown h2 {
	padding: 3px 8px;
	font: bold 23px/36px "微软雅黑";
	color: #333;
}
.countdown h2 span {
	color: #DC442F;
}
.countdown h2 a{
    color:#333333
}
.countdown h2 a:visited{
    color:#333333
}
.countdown h2 a:hover{
    color:#333333
}
.countdown .info-box {
	margin-top: 12px;
	position: relative;
	zoom: 1;
}
.countdown .meta {
	position:relative;
    border:1px solid #ffed85;
    border-right:none;
    border-top:none;
    height:183px;
    width:254px;
    float:left;
    margin-left:2px;
    padding-top:128px;
    z-index:20;
}
.countdown .item-buy{
	width:281px;
    height:68px;
    position:absolute;
    z-index:20;
    left:-27px;
    top:0;
    background:url(assets/group.png) no-repeat;
}
.countdown .moo-countdown-run .item-buy{
	background-position: right -78px;
}
.countdown .moo-countdown-end .item-buy{
	background-position: right 0; 
}
.countdown .item-buy strong{
	font: bold 46px Arial;
	color: white;
	text-shadow: 1px 1px 1px #666;
	letter-spacing: -3px;
	display: block;
	height: 68px;
	line-height: 68px;
	padding-right: 90px;
	text-align: center;	
}
.countdown .item-buy .btn{
	width: 281px;
	height: 68px;
	display: block;
	position: absolute;
	top: 0;
	cursor: pointer;
	background: url(assets/group.png) no-repeat;
}
.countdown .item-buy .buy {
	background-position: 190px 0;
}
.countdown .item-buy .start {
	background-position: 190px -78px;
}
.countdown .item-prices {
	width: 253px;
	height: 59px;
	position: absolute;
	z-index: 10;
	top: 68px;
	left: -11px;
	padding-left: 12px;
	background: url(assets/price.png) no-repeat 1px 0;
	word-break: normal;
	word-wrap: normal;
}
.countdown .item-prices dt, .countdown .item-prices dd {
	width: 84px;
	height: 29px;
	line-height: 29px;
	float: left;
	text-align: center;
}
.countdown .item-prices dt {
	font-size: 14px;
	color: #666;
}
.countdown .item-prices dd {
	font: 17px Verdana;
	letter-spacing: -2px;
	color: #333;
}

.countdown .time-count {
	margin: 14px 0 0 10px;
	white-space: nowrap;
}
.countdown .time-count .tit {
	vertical-align: middle;
	display: inline;
}

.countdown .time-count .value{
    display:inline;
    font:normal 20px Verdana;
    color:#333;
    line-height:1em;
    vertical-align: middle;
}
.countdown .time-count .unit{
    vertical-align: middle;
    margin:0 2px 0 1px;
}

.countdown .picbox {
	width: 460px;
	height: 310px;
	position: relative;
	z-index: 10;
	float: left;
	border: 1px solid #A51100;
	border-left: none;
	background:#cf301a;
}
.countdown .moo-countdown-run .picbox{
	border-color:#1e4502;
    background:#2e7409;
}
.countdown .pic {
	width: 452px;
	height: 301px;
	padding: 3px 4px 4px;
	border-top: 1px solid #FD9B8B;
}
.countdown .moo-countdown-run .pic {
	border-color: #69B539;
}
.countdown .pic a {
	border: 1px solid #F5D6D1;
	display: block;
	text-align: center;
	background-color: white;
	height: 300px;
	overflow: hidden;
}
</pre>
</div>
</body>
</html>
